<!-- 更换手机号 -->
<template>
  <view>
    <aster-back font-color="#333" :show-title="true" title="更换手机号" />
    <view class="mobile">
      <view class="mobile__title"> 已绑定手机号：{{ mobile }} </view>
      <view class="mobile__btn">
        <button @click="to_code()"> 更换手机号 </button>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import AsterBack from '@/components/common/aster-back.vue';
  import config from '@/utils/config';
  import { router } from '@/utils/router';
  import { onLoad } from '@dcloudio/uni-app';
  import { ref } from 'vue';

  const mobile = ref('');

  onLoad((options: any) => {
    mobile.value = options.mobile;
  });

  const to_code = () => {
    router.push(config.route.smscode + '?mobile=' + mobile.value);
  };
</script>

<style lang="scss" scoped>
  page {
    background-color: #fff !important;
    padding: 0 40rpx;
  }

  .mobile {
    padding: 200rpx 20rpx;

    &__title {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36rpx;
    }

    &__btn {
      padding-top: 200rpx;

      button {
        background-color: #ff6a6c;
        color: #fff;
        font-size: 32rpx;
        margin: 0 40rpx;
      }
    }
  }
</style>
